<template>
	<view class="box">
		<view class="user" @tap="getLogin">
			<image class="img" src="../../static/background/user-header2.png" mode=""></image>
			<view class="info">
				<image class="img2" src="../../static/default-avatar.png" mode=""></image>
				<view class="mation">
					<text class="tx1">{{list?.nick_name || '未登录'}}</text>
					<text class="tx2">{{list?.mobile || '点击登录账号'}}</text>
				</view>
			</view>
		</view>


		<view class="balance">
			<view class="vi1">
				<view class="via">
					<view>{{list?.balance || '--'}}</view>
				</view>
				<view class="vib">
					<view>账户余额</view>
				</view>
			</view>
			<view class="vi1">
				<view class="via">
					<view>0</view>
				</view>
				<view class="vib">
					<view>积分</view>
				</view>
			</view>
			<view class="vi1">
				<view class="via">
					<view>0</view>
				</view>
				<view class="vib">
					<view>优惠卷</view>
				</view>
			</view>
			<view class="vi1">
				<view class="via">
					<view><uni-icons type="wallet" size="25"></uni-icons></view>
				</view>
				<view class="vib">
					<view>我的钱包</view>
				</view>
			</view>
		</view>

		<view class="order">
			<view class="vi1">
				<view class="via">
					<view>
						<uni-icons type="map" size="25"></uni-icons>
					</view>
				</view>
				<view class="vib">
					<view>全部订单</view>
				</view>
			</view>
			<view class="vi1">
				<view class="via">
					<view>
						<uni-icons type="wallet" size="25"></uni-icons>
					</view>
				</view>
				<view class="vib">
					<view>待支付</view>
				</view>
			</view>
			<view class="vi1">
				<view class="via">
					<view>
						<uni-icons type="cart" size="25"></uni-icons>
					</view>
				</view>
				<view class="vib">
					<view>代发货</view>
				</view>
			</view>
			<view class="vi1">
				<view class="via">
					<view>
						<uni-icons type="shop" size="25"></uni-icons>
					</view>
				</view>
				<view class="vib">
					<view>待收货</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="wz">
				我的服务
			</view>
			<view class="tb">
				<view class="vi1">
					<view class="via">
						<view>
							<uni-icons type="location" size="25"></uni-icons>
						</view>
					</view>
					<view class="vib">
						<view>收货地址</view>
					</view>
				</view>

				<view class="vi1">
					<view class="via">
						<view>
							<uni-icons type="gift" size="25"></uni-icons>
						</view>
					</view>
					<view class="vib">
						<view>领卷中心</view>
					</view>
				</view>
				<view class="vi1">
					<view class="via">
						<view>
							<uni-icons type="map" size="25"></uni-icons>
						</view>
					</view>
					<view class="vib">
						<view>优惠卷</view>
					</view>
				</view>
				<view class="vi1">
					<view class="via">
						<view>
							<uni-icons type="help" size="25"></uni-icons>
						</view>
					</view>
					<view class="vib">
						<view>我的帮助</view>
					</view>
				</view>



			</view>

			<view class="tb2">
				<view class="vi1">
					<view class="via">
						<view>
							<uni-icons type="heart" size="25"></uni-icons>
						</view>
					</view>
					<view class="vib">
						<view>我的积分</view>
					</view>
				</view>
				<view class="vi1">
					<view class="via">
						<view>
							<uni-icons type="medal" size="25"></uni-icons>
						</view>
					</view>
					<view class="vib">
						<view>退换/售后</view>
					</view>
				</view>

			</view>

		</view>



		<view class="btn">
			<button @tap="logOut" v-if="isLoggedin">退出</button>
		</view>
	</view>
</template>

<script setup>
	import {
		userApi
	} from '@/apis/my.js'
	import {
		log
	} from 'console';
	import {
		ref,
		computed
	} from 'vue'

	import {
		useStore
	} from 'vuex'
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(() => {
		getUserInfo()
	})
	// 声明一个空对象
	const list = ref({})
	const store = useStore()
	// 取vuex中存的token
	const isLogin = computed(() => store.state.user.userInfo.token)
	// 调用接口
	const getUserInfo = async () => {
		const res = await userApi()
		list.value = res.data.userInfo
	}


	const isLoggedin = computed(() => {
		const token = store.state.user.userInfo.token
		return token ? true : false
	})

	// 点击登录
	const getLogin = () => {
		// 如果vuex中没有token
		if (isLogin.value === '') {
			// 跳转到登录页
			uni.navigateTo({
				url: '/pages/login/login'
			})

		}

	}

	const logOut = () => {
		uni.showModal({
			title: '提示',
			content: '确定退出登录吗？',
			success: (res) => {
				console.log(res.confirm);
				if (res.confirm) {
					//调用清除token的方法 

					store.commit('user/delToken')
					list.value = {}
				}
			}
		})
	}
</script>
<style lang="scss" scoped>
	.box {

		background-color: #fafafa;

		.user {
			position: relative;
			height: 300rpx;

			.img {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.info {
				position: relative;
				display: flex;

				.img2 {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					margin-top: 100rpx;
					margin-left: 50rpx;
				}

				.mation {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #c59a46;
					height: 100rpx;
					margin-top: 100rpx;
					margin-left: 20rpx;


					.tx1 {
						font-size: 34rpx;
						font-weight: 700;
					}

					.tx2 {
						font-size: 28rpx;
					}
				}
			}
		}


		.balance {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: space-between;

			.vi1 {
				width: 200rpx;
				height: 150rpx;
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.via {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 32rpx;
					color: #ff0009;
				}

				.vib {
					font-size: 25rpx;
					color: #6a6e72;
				}
			}

			.vi2 {
				width: 150rpx;
				height: 150rpx;

			}

			.vi3 {
				width: 150rpx;
				height: 150rpx;

			}

			.vi4 {
				width: 150rpx;
				height: 150rpx;

			}
		}


		.order {
			height: 140rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top: 15rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;

			.vi1 {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.via {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.vib {
					font-size: 25rpx;
					color: #6a6e72;
				}
			}
		}


		.bottom {
			height: 350rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top: 15rpx;
			background-color: #ffffff;


			.wz {
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 10rpx;
				background-color: #ffffff;
			}

			.tb {
				height: 140rpx;
				margin-top: 20rpx;
				background-color: #ffffff;
				display: flex;
				// justify-content: space-between;
				justify-content: space-around;

				.vi1 {
					width: 140rpx;
					height: 140rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.via {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
					}

					.vib {
						font-size: 25rpx;
						color: #6a6e72;
					}
				}

			}
		}

		.tb2 {
			height: 140rpx;
			background-color: #ffffff;
			display: flex;

			.vi1 {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 25rpx;
				margin-right: 10rpx;

				.via {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.vib {
					font-size: 25rpx;
					color: #6a6e72;
				}
			}


		}

		.btn {
			margin-top: 50rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
	}
</style>